<template>
    <titleComponents :title="title" />
    <el-row :gutter="24" style="height: auto;width: 100%;margin-bottom: 0px;">
        <el-col :span="8">
            <articleHomeShowComponents :articles="articles" />
            <div class="more">
                <router-link :to="{ name: 'activity' }" class="more">更多></router-link>
            </div>
        </el-col>
        <el-col :span="16">
            <photoHomeShowComponents :title="title" />
        </el-col>
    </el-row>
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';
import titleComponents from './homeComponents/titleComponents.vue';
import articleHomeShowComponents from './homeComponents/articleHomeShowComponents.vue';
import photoHomeShowComponents from './homeComponents/photoHomeShowComponents.vue';
export default {
    name: "activityComponents",
    components: {
        titleComponents,
        articleHomeShowComponents,
        photoHomeShowComponents
    },
    setup() {
        let title = ref("精彩活动");
        let articles = ref([]);
        let getInfo = () => {
            $.ajax({
                url: "http://124.221.73.180:3001/articleGet/getArticleByTagHome/",
                type: "post",
                data: {
                    tag: "精彩活动",
                },
                success(resp) {
                    //setTimeout(() => {
                    articles.value = resp;
                    //}, 2000)
                }
            })
        }
        getInfo();
        return {
            articles,
            title,
        }
    }
}

</script>

<style scoped>
.more {
    float: right;
    color: rgb(102, 102, 102);
    text-decoration: none;
}

.more :visited {
    text-decoration: none;
}

.more :hover {
    color: red;
}
</style>